<template>
	<view class="page">
		<cu-custom :bgColor="cubg" class="text-white">
			<block slot="content">我的成长</block>
		</cu-custom>
		<view>
			<scroll-view 
				class="content" 
				scroll-y="true" 
				:style="[{paddingBottom:(CustomBar - 20)+ 'px'}]"
				enable-back-to-top
				@scroll="scroll"
			>
				<view class="head-img">
					<image src="../../static/grow/header.png"></image>
				</view>
				
				<view class="qcode">
					<view class="qcode-num">
						<text>您的专属邀请码</text>
						<view>
							<text>{{grow.invitcode}}</text>
							<text class="lg text-white margin-left" :class="'cuIcon-copy'" @click="copy"></text>
						</view>
					</view>
					<view class="qcode-canvas">
						<image :src="grow.ewm"></image>
					</view>
					<!-- <canvas canvas-id="qrcode" style="width: 50PX;height: 50PX;"  class="qcode-canvas"/> -->
					<image src="../../static/grow/qcode.png" @click="uniShare"></image>
				</view>
				<view class="invite">
					<view class="invite-wrap flex justify-center align-center">
						<view class="flex flex-direction align-center padding-right text-white line" style="font-size: 12px; font-weight: bold;">
							<text>奖励总额</text>
							<text>¥{{grow.jlmoney || 0}}</text>
						</view>
						<view class="flex flex-direction align-center padding-right margin-left text-white line" style="font-size: 12px; font-weight: bold;">
							<text>邀请人数</text>
							<text>{{grow.yqnum || 0}}</text>
						</view>
						<view class="flex flex-direction align-center text-white margin-left" style="font-size: 12px; font-weight: bold;">
							<text>付费人数</text>
							<text>{{grow.peplenum || 0}}</text>
						</view>
					</view>
					<button class="cu-btn round sm bg-white list-btn" @click="goPromotion">查看明细</button>
				</view>
				<view>
					<view class="flex padding justify-center align-center margin-top">
						<view class="left-line"></view>
						<view class="text margin-right margin-left">奖励规则</view>
						<view class=" right-line"></view>
					</view>
					
					<view>
						推广员奖励：用户可选择推广方式（二维码分享、微信好友、微信朋友圈、新浪微博、QQ、链接、等），推广员推荐的新用户将永久记录在推广员名下，推广员名下的用户以后充值相亲会员，推广员都可获得会员费30%的现金返利（含税），统将自动转到余额，可随时提现。
					</view>
					<view>
						推广员奖励：用户可选择推广方式（二维码分享、微信好友、微信朋友圈、新浪微博、QQ、链接、等），推广员推荐的新用户将永久记录在推广员名下，推广员名下的用户以后充值相亲会员，推广员都可获得会员费30%的现金返利（含税），统将自动转到余额，可随时提现。
					</view>
					<view>
						推广员奖励：用户可选择推广方式（二维码分享、微信好友、微信朋友圈、新浪微博、QQ、链接、等），推广员推荐的新用户将永久记录在推广员名下，推广员名下的用户以后充值相亲会员，推广员都可获得会员费30%的现金返利（含税），统将自动转到余额，可随时提现。
					</view>
					
					<view>
						推广员奖励：用户可选择推广方式（二维码分享、微信好友、微信朋友圈、新浪微博、QQ、链接、等），推广员推荐的新用户将永久记录在推广员名下，推广员名下的用户以后充值相亲会员，推广员都可获得会员费30%的现金返利（含税），统将自动转到余额，可随时提现。
					</view>
					
					<view>
						推广员奖励：用户可选择推广方式（二维码分享、微信好友、微信朋友圈、新浪微博、QQ、链接、等），推广员推荐的新用户将永久记录在推广员名下，推广员名下的用户以后充值相亲会员，推广员都可获得会员费30%的现金返利（含税），统将自动转到余额，可随时提现。
					</view>
					<view>
						推广员奖励：用户可选择推广方式（二维码分享、微信好友、微信朋友圈、新浪微博、QQ、链接、等），推广员推荐的新用户将永久记录在推广员名下，推广员名下的用户以后充值相亲会员，推广员都可获得会员费30%的现金返利（含税），统将自动转到余额，可随时提现。
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
	import GrowService from '@/service/grow.js';
	import {mapMutations,mapState} from 'vuex';
	export default {
		data() {
			return {
				cubg:'',
				grow:{}
			};
		},
		computed: {
			...mapState({
				//这里可以通过这种方式引用相应模块的state数据，其中user是模块名。在代码的其他部分可以使用this.userInfo访问数据
				user: ({
					user
				}) => user.userInfo,
			}),
		},
		onLoad(){
		},
		methods:{
			// 获取成长页面数据
			async getGrowData() {
				const params = {
					id: this.user.id
				}
				const res = await GrowService.getShareApi(params);
				if(res) {
					this.grow = res
				}
			},
			// 滑动设置cu-custom 背景色
			scroll(event){
				const {scrollTop} = event.detail;
				if(scrollTop>10) {
					this.cubg = 'bg-white'
				} else {
					this.cubg = ''
				}
			},
			// 进入推广明细
			goPromotion () {
				uni.navigateTo({
					animationDuration:200,
					url:'../promotion/promotion'
				})
			},
			async make() {
				// 同步等待
				// await uQRCode.make({
				// 	canvasId: 'qrcode',
				// 	componentInstance: this,
				// 	text: 'uQRCode',
				// 	size: 50,
				// 	margin: 0,
				// 	backgroundColor: '#ffffff',
				// 	foregroundColor: '#000000',
				// 	fileType: 'jpg',
				// 	correctLevel: uQRCode.errorCorrectLevel.H
				// });
				this.getGrowData()
			},
			copy(){
				const self = this;
				uni.setClipboardData({
				    data: self.user.invitcode,
				    success: function () {
						self.isShow = false
				    }
				});
			},
			 uniShare() {
				uniShare({
					content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
						type: 0,
						href: 'https://uniapp.dcloud.io/',
						title: '标题',
						summary: '描述',
						imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
					},
					menus: [{
							"img": "/static/app-plus/sharemenu/wechatfriend.png",
							"text": "微信好友",
							"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
								"provider": "weixin",
								"scene": "WXSceneSession"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/wechatmoments.png",
							"text": "微信朋友圈",
							"share": {
								"provider": "weixin",
								"scene": "WXSenceTimeline"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/weibo.png",
							"text": "微博",
							"share": {
								"provider": "sinaweibo"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/qq.png",
							"text": "QQ",
							"share": {
								"provider": "qq"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/copyurl.png",
							"text": "复制",
							"share": "copyurl"
						}
					],
					cancelText: "取消",
				}, e => { //callback
					console.log(e);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		width: 100%;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		overflow: auto;
	}
	.head-img{
		width: 100%;
		height: 164px;
	}
	.qcode{
		width: 100%;
		height: 80px;
		position: relative;
		.qcode-num{
			position: absolute;
			z-index: 1;
			transform: translateY(-50%);
			color: #FFFFFF;
			top: 50%;
			left:23px;
			.margin-left{
				margin-left: 10px
			}
		}
		.qcode-canvas{
			position: absolute;
			z-index: 1;
			// width: 50%;
			// height: 50%;
			width: 50px;
			height: 50px;
			top: 50%;
			left: calc(50% - 23px);
			transform: translateY(-50%);
			margin: auto;
		}
	}
	// 邀请
	.invite{
		position: relative;
		&-wrap {
			height: 80px;
			margin: 2px 13px;
			background: linear-gradient(143deg, #FF709A 0%, #FF4D4D 100%);
			border-radius: 5px;
		}
		.list-btn{
			position: absolute;
			bottom:-14px;
			left:50%;
			transform:translate(-50%);
			width: 150px;
			height: 28px;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 22px;
			color: #333333;
		}
		
	}
	.left-line{
		width: 40px;
		height: 2px;
		background: linear-gradient(90deg, #FFFFFF 0%, #E428FD 100%);
		opacity: 1
	}
	.right-line{
		width: 40px;
		height: 2px;
		background: linear-gradient(270deg, #FFFFFF 0%, #E428FD 100%);
		opacity: 1;
	}
	.text{
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 22px;
		color: #333333;
		opacity: 1;
	}
	
	.canvas-hide {
	        /* 1 */
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		/* 2 */
		z-index: -9999;
		/* 3 */
		opacity: 0;
	}
	.line {
		position: relative;
		&::after{
			content: " ";
			display: block;
			position: absolute;
			background-color: #fff;
			top: 50%;
			right:0;
			transform: translate(-50%,-50%);

			width: 1px;
			height: 20px;
		}
	}
</style>
